<template>
  <!-- <div class="ppt-template-panel">开发中...</div> -->
  <div class="ppt-template-panel">
    <div class="template-item" v-for="(item, index) in templateList" :key="index">
      <div class="template-item-content" :style="customStyle(item.background)">
        <div class="text">{{ item.id }}</div>

        <div class="btns">
          <Button type="primary" size="small" @click="useTemplate(item)">应用</Button>
        </div>
      </div>
    </div>
  </div>
  <FullscreenSpin :loading="exporting" :tip="tipTxt" />
</template>

<script setup lang="ts">
import { computed, ref, type StyleValue } from 'vue'
import usePPTTemplate from '@/hooks/usePPTTemplate'
import { usePageParamsStore, useSlidesStore } from '@/store'
import Button from '@/components/Button.vue'
import FullscreenSpin from '@/components/FullscreenSpin.vue'

const pptTemp = usePPTTemplate()
const tipTxt = ref('')
const exporting = computed(() => pptTemp.isRefresh.value)

const slideStore = useSlidesStore()
const pageParams = usePageParamsStore()

const templateList = pptTemp.templateList

const customStyle = (item: any): StyleValue => {
  if (item.type === 'linear') {
    const color1 = item.content[0]
    const color2 = item.content[1]

    return {
      background: `linear-gradient(to top, ${color1.color} ${color1.pos}%, ${color2.color} ${color2.pos}%)`
    }
  }
  else if (item.type === 'image') {
    return {
      backgroundImage: `url(${item.content})`,
      backgroundSize: '100% 100%'
    }
  }

  return {
    backgroundColor: item.content
  }
}

async function useTemplate(item: any) {
  pageParams.setTemplateParams(item.id)
  tipTxt.value = 'PPT生成中...'
  const res: any = await pptTemp.refreshResourceware()
  if (res) {
    slideStore.updateSlideIndex(0)
  }
  tipTxt.value = ''
}

</script>

<style lang="scss" scoped>
.ppt-template-panel {
  @include flex-grid-layout();
}

.template-item {
  @include flex-grid-layout-children(2, 48%);

  padding-bottom: 30%;
  border-radius: $borderRadius;
  position: relative;
  cursor: pointer;

  .template-item-content {
    @include absolute-0();

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    border: 1px solid $borderColor;
    border-radius: $borderRadius;
    text-align: center;
  }

  .text {
    font-size: 16px;
  }

  .colors {
    display: flex;
  }

  .color-block {
    margin-top: 8px;
    width: 12px;
    height: 12px;
    margin-right: 2px;
  }

  &:hover .btns {
    opacity: 1;
  }

  .btns {
    @include absolute-0();

    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgba($color: #000, $alpha: .25);
    opacity: 0;
    transition: opacity $transitionDelay;
  }
}
</style>
